<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>09 百度引擎</title>
    <script src='http://api.map.baidu.com/api?v=2.0&ak=Rw71NpIBQBWyzzNjN3rUI9zsnVREiB4s'></script>
    <script src='../lib/jQuery/jquery-3.6.0.js'></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #all-map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>城市：</td>
        <td><input id='cityId' type='text' value='杭州' /></td>
        <td>小区：</td>
        <td><input type='text' value='观璟庭' id='areaId'></td>
        <td>
            <button id='showBtn'>显示</button>
        </td>
    </tr>
</table>
<div id='all-map'></div>
<script>
	$(document).ready(() => {
		let map = new BMap.Map('all-map');
		map.centerAndZoom('杭州', 5);
		map.addControl(new BMap.MapTypeControl());
		map.setMapStyle({ style: 'dark' });

		let options = {
			renderOptions: {
				map,
				selectFirstResult: true,
			},
			onSearchComplete: (results) => {

			},
		};
		map.enableScrollWheelZoom(true);

		function Mask() {

		}

		function addMask(map) {
			console.log('add mask');
			let divDom = $('<div/>');
			let size = map.getSize();
			$(divDom).css({
				position: 'absolute',
				width: `${size.width}px`,
				height: `${size.height}px`,
				background: 'rgba(255,0,0,0.1)',
				cursor: 'crosshair',
			});
			$(map.getPanes().floatPane).append(divDom);
			return divDom[0];
		}

		function drawMask() {
			console.log('draw');
		}

		extendOverlay(Mask, addMask, drawMask);

		function extendOverlay(constructor, add, draw) {
			constructor.prototype = new BMap.Overlay();
			constructor.prototype.initialize = function (map) {
				return add.call(this, map);
			};
			constructor.prototype.draw = draw;
		}

		let mask = new Mask();
		// map.addOverlay(mask);
		// setTimeout(() => {
		// 	console.log('remove');
		// 	console.log(mask);
		// 	map.removeOverlay(mask);
		// }, 3000);
	});
</script>
</body>
</html>